#include("../_inc/_layout_index.html")
#@layoutIndex() 

#define content()
#include("../_inc/_header.html")

<div class="fly-panel fly-column">
  <div class="layui-container">
    <ul class="layui-clear">
      <li class="layui-hide-xs layui-this">
						<a href="#(ctx)/qa">首页</a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=111">提问</a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=112">分享<span class="layui-badge-dot"></span></a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=113">讨论</a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=114">建议</a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=115">公告</a>
					</li>
					<li>
						<a href="#(ctx)/qa?p=list&c=116">动态</a>
					</li>
      <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li>

					<!-- 用户登入后显示 -->
					<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
						<a href="#(ctx)/qa?p=user">我发表的贴</a>
					</li>
					<li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
						<a href="#(ctx)/qa?p=favorite">我收藏的贴</a>
					</li>
    </ul> 
    
    <div class="fly-column-right layui-hide-xs">
					<span class="fly-search"><i class="layui-icon"></i></span>
					<a href="#(ctx)/qa?p=add" class="layui-btn">发表新帖</a>
				</div>
				<div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
					<a href="#(ctx)/qa?p=add" class="layui-btn">发表新帖</a>
				</div>
  </div>
</div>

<div class="layui-container">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md8">
					<div class="fly-panel">
						<div class="fly-panel-title fly-filter">
							<a>置顶</a>
						</div>

						<ul class="fly-list" id="viewTopTplContent">
							<!--模板1-listTpl-->
						</ul>
					</div>

					<div class="fly-panel" style="margin-bottom: 0;">

						<div class="fly-panel-title fly-filter">
							<a href="" class="layui-this">综合</a>
							<span class="fly-mid"></span>
							<a href="">未结</a>
							<span class="fly-mid"></span>
							<a href="">已结</a>
							<span class="fly-mid"></span>
							<a href="">精华</a>
							<span class="fly-filter-right layui-hide-xs">
            <a href="" class="layui-this">按最新</a>
            <span class="fly-mid"></span>
							<a href="">按热议</a>
							</span>
						</div>

						<ul class="fly-list" id="viewListTplContent">
							<!--模板1-listTpl-->
						</ul>
						<div style="text-align: center">
							<div class="laypage-main">
								<a href="#(ckey)/qa?p=list&c=111" class="laypage-next">更多求解</a>
							</div>
						</div>

					</div>
				</div>
				<div class="layui-col-md4">

					<dl class="fly-panel fly-list-one" id="hotTplContent">
						<dt class="fly-panel-title">本周热议</dt>
						<div class="fly-none">没有相关文章</div>
					</dl>

				</div>
			</div>
		</div>

		

		#[[
		<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
		<script id="listTpl" type="text/html">
			{{# layui.each(d.list, function(index, item){ }}
			<li>
				<a href="qa?p=userlist&id={{ item.userId }}" class="fly-avatar">
					{{# if(item.avatar === ""){ }} 
					<img src="../../static/center/img/avatar5.png" alt="{{ item.realname }}">
					{{#  } else { }}
					<img src="{{ item.avatar }}" alt="{{ item.realname }}">
					{{# } }}
				</a>
				<h2>
              <a class="layui-badge">{{ item.category }}</a>
              <a href="qa?p=detail&id={{ item.articleId }}">{{ item.title }}</a>
            </h2>
				<div class="fly-list-info">
					<a href="qa?p=userlist&id={{ item.userId }}" class="fly-link">
						<cite>{{ item.realname }}</cite>
					</a>
					<span>{{ item.ctime }}</span> {{# if(item.type === 2){ }}
					<span class="layui-badge fly-badge-accept layui-hide-xs">已结</span> {{# } }}
					<span class="fly-list-nums"> 
                <i class="iconfont icon-pinglun1" title="回答"></i> {{ item.commentNum }}
              </span>
				</div>
				<div class="fly-list-badge">
					<!--<span class="layui-badge layui-bg-red">精帖</span>-->
				</div>
			</li>
			{{# }); }} {{# if(d.list.length === 0){ }} 
			<li>没有相关文章</li>
			{{# } }}
		</script>

		<script id="hotTpl" type="text/html">
			<dt class="fly-panel-title">本周热议</dt> {{# layui.each(d.list, function(index, item){ }}
			<dd>
				<a href="qa?p=detail&id={{ item.articleId }}">{{ item.title }}</a>
				<span><i class="iconfont icon-pinglun1"></i> {{ item.commentNum }}</span>
			</dd>
			{{# }); }} {{# if(d.list.length === 0){ }}
			<div class="fly-none">没有相关文章</div>
			{{# } }}
		</script>
		]]#
		
		#include("../_inc/_footer.html")

#end

#define js()
<script>
			layui.config({
				version: "3.0.0",
				base: '#(TPATH)/res/mods/'
			}).extend({
				fly: 'index'
			}).use(['fly', 'laytpl'], function() {
				var $ = layui.$,
					fly = layui.fly;
				var laytpl = layui.laytpl;

				function showTplData(data, tpl, target) {
					var view = document.getElementById(target);
					laytpl(tpl).render(data, function(html) {
						view.innerHTML = html;
					});
				}

				function refreshTopList() {
					$.ajax({
						url: "#(ctx)/apis/article/view",
						data: {
							top: 1,
							system_id: 2,
							orderby: "ctime desc"
						},
						success: function(result) {
							if(result && result.code == 1) {
								var data = result.data;
								showTplData(data, listTpl.innerHTML, "viewTopTplContent");
							}
						}
					});
				}

				function refreshViewList() {
					$.ajax({
						url: "#(ctx)/apis/article/view",
						data: {
							numPerPage: 20,
							system_id: 2,
							orderby: "ctime desc"
						},
						success: function(result) {
							if(result && result.code == 1) {
								var data = result.data;
								showTplData(data, listTpl.innerHTML, "viewListTplContent");
							}
						}
					});
				}

				function refreshHotList() {
					$.ajax({
						url: "#(ctx)/apis/article/view",
						data: {
							numPerPage: 10,
							system_id: 2,
							orderby: "comment_num desc"
						},
						success: function(result) {
							if(result && result.code == 1) {
								var data = result.data;
								showTplData(data, hotTpl.innerHTML, "hotTplContent");
							}
						}
					});
				}

				$(function() {
					refreshTopList();
					refreshHotList();
					refreshViewList();
				});

			});
		</script>
		#end
